<ng-container *cxOutlet="position">
  <ng-container
    *ngFor="
      let component of ((currentSlot$ | async)?.components | slice: 0:limit)
    "
  >
    <ng-container *cxOutlet="component.typeCode">
      <!--
        We should get ride of this attr data
        as we dont' want a hosting element wrappring our components.
        It's currently only used in one test case.
        [attr.data-component-uid]="component.uid"
      -->
      <ng-container *ngIf="componentClass; else containerWrapper">
        <!-- we only create a wrappimg div if we need to host a css class -->
        <div
          cxComponentWrapper
          [componentType]="component.typeCode"
          [componentUid]="component.uid"
          [componentUuid]="component.uuid"
          [componentCatalogUuid]="component.catalogUuid"
          [contextParameters]="contextParameters"
          [componentCssClass]="componentClass"
        ></div>
      </ng-container>
      <ng-template
        #containerWrapper
        cxComponentWrapper
        [componentType]="component.typeCode"
        [componentUid]="component.uid"
        [componentUuid]="component.uuid"
        [componentCatalogUuid]="component.catalogUuid"
        [contextParameters]="contextParameters"
      ></ng-template>
    </ng-container>
  </ng-container>
</ng-container>
